{* $Id$ *}
{include_core file="admin/lib/header.html" title="首页展示添加"}
<style>
  .select-group{
    position: relative;
  } 
  .select-div{
    width:191px;
    height:25px;
    line-height: 25px;
    padding-left: 5px;
    border:1px solid #AAA;
  }
  .select-div span{
    font-size: 12px;
  }
  .select-div i{
    font-size: 8px;
    width:18px;
    height:25px;
    display: block;
    float: right;
    background: #ECECEC;
    text-align: center;
  }
  .select-ul{
    position: absolute;
    top:27px;
    width:196px;
    background: #FFF;
    max-height: 300px;
    border-left:1px solid #AAA;
    border-right:1px solid #AAA;
    border-bottom:1px solid #AAA;
    z-index: 100;
  }
  .select-ul li{
    height:22px;
    line-height: 22px;
    padding-left:10px;
  }
  .select-ul .select-input{
    height:30px;
    line-height: 30px;
    padding-left:5px;
  }
  .select-ul li:hover{
    color:#FFF;
    background: #5e1ddf;
  }
  .select-ul li input{
    font-size: 12px;
    margin-top: 4px;
    height: 17px;
    width:120px;
    float: left;
  }
  .select-ul li span{
    margin-top: 4px;
    margin-left: 4px;
    display: block;
    float: left;
  }
  .select-ul li b{
    font-weight: normal;
  }
  .select-ul li i{
    float: right;
    width:14px;
    height: 14px;
    margin-right: 6px;
    margin-top:4px;
  }
  .select-ul li .cancle-edit{
    color:#FFF;
    font-size: 12px;
    margin-left: 4px;
  }
  .select-ul li .select-edit{
    background: url("{$smarty.const.SITE_URL}/images/edit-option.png");
  }
  .select-ul li .select-delete{
    background: url("{$smarty.const.SITE_URL}/images/delete-option.png");
  }
  .select-ul li i{
    display: none;
  }
  .select-ul li:hover i{
    display: block;
  }
  .select-ul .select-option input{
    width: 100px;
  }
  .hide{
    display: none;
  }
</style>
<div class="page-header border-bottom clearfix">
  <h2 class="left">首页管理<span>{if $info}编辑{else}添加{/if}推送产品</span></h2>
  <a href="{AnUrl('focus/admin')}" class="btn btn-default btn-sm right">&lt;&nbsp;返回首页管理列表</a>
</div>
<!--start:焦点图新增-->
<div class="add-form">
  <form class="js_creatForm" action="{AnUrl('focus/admin/save')}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" value="{$focus_info.id}">
    <table class="table" cellpadding="0" cellspacing="0">
      <tr>
        <th><label for="" class="add-f-label">首页位置：</label></th>
        <td>
        {$position_list = focus_config::$focus_position_list}
          <select class="add-f-slt1 js_res_name" name="info[res_name]" style="width:300px;">
            <option value="0" selected>推送位置</option>
            {foreach $position_list as $k=>$v}
              <option value="{$k}" {if $focus_info.res_name == $k} selected {/if}>{$v['title']}--{$v['width']}px*{$v['height']}px</option>
            {/foreach}
          </select>
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>选择并设置推送的位置</div>
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">产品类型：</label></th>
        <td>
        {$type_list = focus_config::$type}
          <select class="add-f-slt1 js_goods_type" name="info[goods_type]">
            {foreach $type_list as $k=>$v}
              <option value="{$k}" {if $focus_info.goods_type == $k} selected {/if}>{$v}</option>
            {/foreach}
          </select>
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>选择并设置产品的类型</div>
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">产品标题：</label></th>
        <td>
          <input name="info[title]" style="width:490px;" value="{$focus_info.title}" type="text" class="add-f-ipt1 js_title">
          <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>产品标题会显示在相应内容的标题位置，最多输入 <span style="color:red;">15</span> 字，还可输入 <span class="js_titleNum" style="color:red;">15</span> 字</div>
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">产品链接：</label></th>
        <td>
          <input name="info[link]" style="width:490px;" value="{$focus_info.link}" type="text" class="add-f-ipt1 js_link">
          {* <div class="tips"><span style="line-height: 34px;color: #f00;margin-right: 10px;">*</span>点击产品主题会跳转到产品链接，很重要！</div> *}
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">产品ID：</label></th>
        <td>
          <input name="info[res_id]" style="width:490px;" value="{$focus_info.res_id}" type="text" class="add-f-ipt1">
          <div class="tips">用作关联用户头像，不显示用户头像的产品可不填！</div>
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">简介：</label></th>
        <td>
          <input name="info[intro]" style="width:490px;" value="{$focus_info.intro}" type="text" class="add-f-ipt1 js_intro">
        </td>
      </tr>
      <tr>
        <th><label for="" class="add-f-label">排序：</label></th>
        <td>
          <input name="info[view_order]" value="{$focus_info.view_order}" type="text" class="add-f-ipt1 js_view_order">
        </td>
      </tr>
      <tr>
        <th valign="top"><label for="" class="add-f-label">封面：</label></th>
        <td class="perUpOuter">
          <div class="clearfix">
            <div class="btn-upload left">
              <a href="javascript:void(0);"><i class="icon-upload"></i>上传封面</a>
              <input class="js_cover js_upFile"  type="file" name="cover">
            </div>
            <!-- <span class="tips left">&nbsp;&nbsp;&nbsp;焦点图封面图比例：720*400</span> -->
          </div>
          <div class="js_upFileBox">
              {if $focus_info.cover}
              <img src="{_image($focus_info.cover)}" width="360">
              {else}
              <!-- <img src="{$smarty.const.SITE_URL}/images/m/default/focus_default.jpg" width="360"> -->
              {/if}
          </div>
        </td>
      </tr>
      <tr><th>&nbsp;</th><td class="noborder"><button type="submit" class="btn btn-success js_submit">&nbsp;&nbsp;&nbsp;确认&nbsp;&nbsp;&nbsp;</button></td></tr>
    </table>
  </form>
</div>
<!--end:焦点图新增-->
<script>
var resName = 'focus';
function setNum(thisClass, maxNum) {
  var presentNum = $('.'+thisClass).val().length;
  var remainNum  = maxNum - presentNum;
  if (remainNum < 0) {
    $('.'+thisClass).val($('.'+thisClass).val().substr(0,maxNum));
    $('.'+thisClass+'Num').text(0);
  } else {
    $('.'+thisClass+'Num').text(remainNum);
  }
}

var isLink = 0;
$(function(){
  // 初始化 columns 名称
  if ($('.js_columns').val() != '') {
    var columnsValue = $('.js_columns').val();
    var columnsTitle;
    $('.js_columns').next().find('.js_option').each(function(){
      if ($(this).attr('id-data') == columnsValue) {
        $('.js_columns').prev().children().eq(0).html($(this).children().eq(0).html());
        return;
      }
    });
  } 

  // 显示 option
  $('.js_select').click(function(){
    $(this).next().next().toggleClass('hide');
  });
  // 隐藏 option
  $('body').click(function(e){
    if ($(e.target).closest('.select-group').attr('select-data') != 'select') {
      $('.js_optionGroup').addClass('hide');
    }
    if ($(e.target).closest('.float-confirm').length == 1) {
      $('.js_columns').parent().removeClass('hide');
    }
  });
  /* // 选择 option
  $('.js_optionGroup').on('click', '.js_option', function(){
    var idData = $(this).attr('id-data');
    $(this).parent().prev().val(idData);
    $(this).parent().prev().prev().children().eq(0).html($(this).children().eq(0).html());
    $('.js_optionGroup').addClass('hide');
    if ($(this).parent().prev().attr('name') == 'info[position]') {
      $.get("{AnUrl('focus/admin/check_columns')}", { position:idData }, function(data){
        if (data.info == 'ok') {
          var optionList = data.columns_list;
          $('.js_columns').next().find('.js_option').remove();
          for (var i = 0; i < optionList.length; i++) {
            $('.js_columns').next().find('.js_selectInfo').after('<li id-data="'+optionList[i]['id']+'" class="select-option js_option"><b>'+optionList[i]['title']+'</b><i class="select-delete js_deleteOption"> </i><i class="select-edit js_editOption"> </i></li>');
          }
          $('.js_columns').val('');
          $('.js_columns').prev().children().eq(0).html('请选择...');
          if (i == 0) {
            $('.js_columns').next().find('.js_selectInfo').html('请添加子版块...');
          } else {
            $('.js_columns').next().find('.js_selectInfo').html('请选择...');
          }
        } else {
          showMsg(data.info);
        }
      }, 'json');
    }
  });
  $('.js_selectInfo').click(function(){
    var value = $(this).html();
    $(this).parent().prev().val('');
    $(this).parent().prev().prev().children('span').html(value);
    $('.js_optionGroup').addClass('hide');
  });

  // 更新子版块
  $('.js_optionGroup').on('click', '.js_addOption', function(e){
    e.stopPropagation();
  });
  $('.js_optionGroup').on('keyup', '.js_addOption', function(e){
    e.stopPropagation();
    $(this).attr('style', '');
  });
  $('.js_optionGroup').on('click', '.js_sureAddOption', function(e){
    e.stopPropagation();
    var position      = $('.js_position').val();
    var columns_title = $(this).prev().val();
    var idData        = $(this).prev().attr('id-data');
    var selectInfo    = $(this).parent().parent().find('.js_selectInfo');
    var currElement   = $(this);

    if ($('.js_addOption').val() == '') {
      showMsg('请填写子版块标题');
      currElement.prev().css('border', 'solid 1px red');
      currElement.prev().focus();
      return ;
    }
    $.get("{AnUrl('focus/admin/update_columns')}", { title:columns_title, position:position ,id:idData }, function(data){
      if (data.info == 'ok') {
        var optionList = data.columns_list;
        currElement.parent().parent().find('.js_option').remove();
        for (var i = 0; i < optionList.length; i++) {
          selectInfo.after('<li id-data="'+optionList[i]['id']+'" class="select-option js_option"><b>'+optionList[i]['title']+'</b><i class="select-delete js_deleteOption"> </i><i class="select-edit js_editOption"> </i></li>');
        }
        if (currElement.html() == '添加') {
          currElement.prev().val('');
        } else {
          $('.js_columns').prev().children().eq(0).html(columns_title);
        }        
      } else {
        showMsg(data.info);
      }
    }, 'json');
  });

  // 修改子版块
  var editBefore = 0;
  var parentBefore;
  $('.js_optionGroup').on('click', '.js_editOption', function(e){
    e.stopPropagation();
    if (editBefore != 0) {
      parentBefore.css('height', '22px');
      parentBefore.css('line-height', '22px');
      parentBefore.html(editBefore);
    }

    var idData = $(this).parent().attr('id-data');
    var title  = $(this).parent().children().eq(0).html();
    var currParent = $(this).parent();
    editBefore = $(this).parent().html();
    currParent.css('height', '30px');
    currParent.css('line-height', '30px');

    currParent.html('');
    currParent.append('<input type="text" class="js_addOption" id-data='+idData+' value="'+title+'"/>');
    currParent.append('<span class="btn btn-xs btn-default js_sureAddOption">修改</span>');
    currParent.append('<b class="cancle-edit js_cancleEdit">取消</b>');

    parentBefore = currParent;
  });

  // 取消修改
  $('.js_optionGroup').on('click', '.js_cancleEdit', function(e){
    e.stopPropagation();
    $(this).parent().css('height', '22px');
    $(this).parent().css('line-height', '22px');
    $(this).parent().html(editBefore);
  });

  // 删除子板块
  $('.js_optionGroup').on('click', '.js_deleteOption', function(e){
    e.stopPropagation();
    var id = $(this).parent().attr('id-data');
    var currOption = $(this);
    showConfirm('您确定要删除子版块吗？', 0, function(){
      $.get("{AnUrl('focus/admin/delete_columns')}", { id:id }, function(data){
        if (data.info == 'ok') {
          showMsg('删除子版块成功');
          if (currOption.parent().parent().prev().val() == id) {
            currOption.parent().parent().prev().val('');
            currOption.parent().parent().prev().prev().children().eq(0).html('请选择...');
          }
          currOption.parent().remove();
        } else {
          showMsg('删除子版块失败');
        }
      }, 'json');
      $('.js_columns').parent().removeClass('hide');
    });
  }); */

  // 初始化剩余字数
  setNum('js_title', 15);
  $('.js_title').keyup(function(){
    setNum('js_title', 15);
  });
  
  {if $focus_info.link}
    isLink = 1;
  {/if}
  
  $('.js_link').blur(function(){
    var link = $(this).val();
    /* if (!link.match(/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]+)([\/\w \.-]*)*\/?$/)) {
      showMsg('请填写正确的链接');
      isLink = 0;
    } else {
      isLink = 1;
    } */
    isLink = 1;
  });

  // 提交验证
  $('.js_submit').click(function(e){
    e.preventDefault();
    var title      = $.trim($('.js_title').val());
    var link       = $.trim($('.js_link').val());
    var position   = $.trim($('.js_res_name').val());
    var goods_type   = $.trim($('.js_goods_type').val());
    if (!position || position == '0') {
      showMsg('位置不能为空');
      return;
    }
    if (!goods_type || goods_type == '') {
      showMsg('产品类型必须选择');
      return;
    }
    if (!title) {
      showMsg('标题不能为空');
      return;
    }
    if (getFontNum(title) > 30) {
      showMsg('标题不能超过30字');
      return;
    }
    {if !$id}
      var cover = $.trim($('.js_cover').val());
      if (!cover) {
        showMsg('封面不能为空');
        return;
      }
    {/if}
/*  if (!link) {
      showMsg('链接不能为空');
      return;
    } */
    if (!isLink) {
      showMsg('请填写正确的链接');
      return;
    }

    $('.js_creatForm').submit();
  });
  
  // 上传图片预览
  $(".js_upFile").each(function(i){
    $(this).change(function(e){
      handleFileSelect($(this));
    });
  });
});
</script>
{include_core file="admin/lib/footer.html"}